<!--主体商城页面 -->
<template>
    <div>
        <el-row><!--轮播图-->
            <el-col :span="24">
                <template>
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item>
                            <img width="100%" :src="others.showPhoto1">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img width="100%" :src="others.showPhoto2">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img width="100%" :src="others.showPhoto3">
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </el-col>
        </el-row>
        <el-row><!--游戏打折信息及激活教程教程图-->
            <el-col :span="16" v-show="others.categoryId!==null">
                <transition-group appear 
                    name="animate__animated animate__bounce"
                    enter-active-class="animate__flipInY">
                    <h1 key="xxx">
                        今日《
                        <span style="color: brown;">{{gameCategoryIdToName}}</span>
                        》类游戏打
                        <span style="color: brown;">{{discountName}}</span>
                        折哦！！！
                    </h1>
                </transition-group>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" round @click="dialogVisible = true" class="el-icon-magic-stick">查看游戏激活教程</el-button>
                    <el-dialog
                        :visible.sync="dialogVisible"
                        width="30%">
                        <span>激活教程图👇</span>
                        <br><br><br>
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="others.teachPhoto"
                            :preview-src-list="[others.teachPhoto]">
                        </el-image>
                        <br><br><br>
                        <span>点击图片👆放大观看🔍</span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center"><!--游戏搜索框及其筛选框（未完成）-->
            <el-col :span="8">
                <el-input
                    prefix-icon="el-icon-search"
                    :placeholder="`请输入游戏全名并按下回车进行搜索`"
                    v-model="inputSearch"
                    @keyup.enter.native="search"
                    clearable>
                </el-input>
            </el-col>
        </el-row>
        <!--主体(子组件)，展示游戏类别及其游戏-->
        <BaseGameCategoryGameShow
            :allGames="allGames"
            :allGameCategory="allGameCategory"
            :allGameSpecification="allGameSpecification"
            :others="others"
            :gameSize="7">
        </BaseGameCategoryGameShow>
        <el-button @click="test">aaaa</el-button>
    </div>
</template>
<script>
import axios from 'axios';
import 'animate.css'
import BaseGameCategoryGameShow from '@/components/BaseGameCategoryGameShow';
export default {
    name:'gameStore',
    components:{BaseGameCategoryGameShow},
    data() {
        return {
            others:{
                showPhoto1:'',
                showPhoto2:'',
                showPhoto3:'',
                teachPhoto:'',
                categoryId:'',
                discount:'',
            },
            allGameCategory:[],
            allGames:[],
            allGameSpecification:[],
            dialogVisible:false,
            inputSearch:'',
        };
    },
    mounted(){
        axios.get('/others/getSlideShow').then(//杂项查询
            response=>{
                this.others=response.data.data;
            }
        );
        axios.get('/game-category/getAll').then(//游戏类别查询
            response=>{
                this.allGameCategory=response.data.data;
            }
        );
        axios.get("/games/getAll").then(//游戏查询即具体规格查询，筛选
            response=>{
                this.allGames=response.data.data;
                axios.get("/game-specification/getAll").then(
                    response=>{//这里不能直接赋值，要筛选出游戏还没被删并且自身还没被下架且库存大于0的那部分；
                        const mapTool=new Map();
                        this.allGames.forEach((game)=>{
                            mapTool.set(game.id,true);
                        })
                        response.data.data.forEach((data)=>{
                            if(data.putaway&&mapTool.get(data.gameId)&&data.number>0){
                                this.allGameSpecification.push(data);
                            }
                        })
                    }
                );
            }
        );
    },
    methods: {
        search(){//js中通过indexOf来模拟sql中的模糊查询（因为这里不需要发请求查数据库，用的还是主页的数据），并跳转路由展示
            var checkoutGameCategory=new Map();
            var searchGames=this.allGames.filter((game)=>{
                if(game.fullName.indexOf(this.inputSearch)!==-1){
                    checkoutGameCategory.set(game.classesId,true);
                    return true;
                }else{
                    return false;
                }
            });
            var searchGameCategory=[];
            this.allGameCategory.forEach((gameCategory)=>{
                if(checkoutGameCategory.get(gameCategory.id)==true){
                    searchGameCategory.push(gameCategory);
                }
            })
            this.$router.push({
                name:'searchGames',
                params:{
                    searchGames,
                    allGameSpecification:this.allGameSpecification,
                    searchGameCategory,
                    others:this.others,
                }
            }),
            this.inputSearch='';
        },
        test(){
            console.log("数据",this.allGameCategory,this.allGames,this.allGameSpecification)
        },
    },
    computed: {
        gameCategoryIdToName(){
            var GName='';
            this.allGameCategory.forEach((gamCategory)=>{
                if(gamCategory.id===this.others.categoryId){
                    GName=gamCategory.classesName;
                    return;
                }
            });
            return GName;
        },
        discountName(){
            return (this.others.discount*10).toFixed(1);
        }
    },
    watch: {}, 
}
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>